<route>
    {
        meta: {
            title: "创建屏幕"
        }
    }
    </route>

<script setup name="manageExampleAdd">
import useUserStore from '@/store/modules/user'
import useUserGroupStore from '@/store/modules/userGroup'

const router = useRouter()

const userStore = useUserStore()
const groupStore = useUserGroupStore()
const groupList = ref([])

const formRef = ref()

const form = ref({
    name: '',
    username: '',
    password: '',
    role: '',
    groupId: ''
})

const rules = ref({
    name: [
        { required: true, message: '请输入屏幕名称', trigger: 'blur' }
    ],
    groupId: [
        { required: true, message: '请选择在线状态', trigger: 'blur' }
    ]
})

onMounted(() => {
    // groupStore.getGroup().then(res => {
    //     handleTop(res)
    // })
})

function handleTop(obj) {
    obj.forEach(item => {
        groupList.value.push({ id: item.id, name: item.name })
        if(item.children.length) {
            handleTop(item.children)
        }
    })
}

function onSubmit() {
    formRef.value.validate(valid => {
        if (valid) {
            let obj = JSON.parse(localStorage.getItem("screen_list"))
            obj.push({fileName: form.value.name, personName: form.value.groupId})
            localStorage.setItem("screen_list", JSON.stringify(obj))
            ElMessage({
                type: 'success',
                message: '新增成功'
            })
            router.push({
                name: 'screenExampleIndex'
            })
        }
    })
}
</script>

<template>
    <div>
        <page-header title="新增屏幕"/>
        <page-main>
            <el-row>
                <el-col :md="24" :lg="12">
                    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
                        <el-form-item label="屏幕名称" prop="name">
                            <el-input v-model="form.name" placeholder="请输入姓名" />
                        </el-form-item>
                        <el-form-item label="在线状态" prop="groupId">
                            <el-select v-model="form.groupId" placeholder="请选择在线状态">
                                <el-option label="在线" value="1"></el-option>
                                <el-option label="离线" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </page-main>
        <fixed-action-bar>
            <el-button type="primary" size="large" @click="onSubmit">提交</el-button>
        </fixed-action-bar>
    </div>
</template>
